<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--360浏览器优先以webkit内核解析-->
	<title>按图索极介绍</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">
	<div class="col-sm-12">
		<blockquote class="text-warning" style="color: #1a7bb9;font-weight: 600">
			<h2>欢迎来到按图索极的后台管理系统</h2>
		</blockquote>

		<hr>
	</div>
</div>
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm-4">

			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h3>党政服务</h3>
				</div>
				<div id="main" style="width: 700px;height:500px;background-color: white;"></div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h3>通知</h3>
				</div>
				<div style="background-color: white;width: 100%;display: flex;flex-direction: column">
					<div class="text-warning" style="height: 60px;width: 92%;margin: 0 4% 0 4%;display: flex;align-items: center;font-size: 18px;border-bottom: 1px solid rgba(0,0,0,0.2)">互联网+成绩已出！！</div>
					<div class="text-warning" style="height: 60px;width: 92%;margin: 0 4% 0 4%;display: flex;align-items: center;font-size: 18px;border-bottom: 1px solid rgba(0,0,0,0.2)">恭喜！我院学子在本次挑战杯中荣获省金</div>
					<div class="text-warning" style="height: 60px;width: 92%;margin: 0 4% 0 4%;display: flex;align-items: center;font-size: 18px;border-bottom: 1px solid rgba(0,0,0,0.2)">测试</div>
					<div class="text-warning" style="height: 60px;width: 92%;margin: 0 4% 0 4%;display: flex;align-items: center;font-size: 18px;">按图索极yyds</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>

<!--导入图表组件库-->
<!--<script src="sChart.js"></script>-->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<script type="text/javascript">
	$('#pay-qrcode').click(function(){
		var html=$(this).html();
		parent.layer.open({
			title: false,
			type: 1,
			closeBtn:false,
			shadeClose:true,
			area: ['600px', '360px'],
			content: html
		});
	});
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	option = {
		title: {
			/*text: '党政服务',*/
			subtext: '计算学院党员人数'
		},
		xAxis: {
			type: 'category',
			data: ['计算1班', '计算2班', '计算3班', '计算4班', '软工1班', '软工2班', '软工3班', '软工4班']
		},
		yAxis: {
			type: 'value',
			// 初始化 单位 (可以不填)
			axisLabel: {
				formatter: '{value} 人'
			}
			// axisPointer: {
			//   snap: true
			// }
		},
		series: [
			{
				data: [40, 43, 37, 41, 32, 33, 34, 38],
				type: 'line',
				smooth: true,
				// 取最大、小值
				markPoint: {
					data: [
						{ type: 'max', name: 'Max' },
						{ type: 'min', name: 'Min' }
					]
				},
				// 取平均值
				/*markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }*/
			},
			{
				data: [5, 6, 2, 4, 2, 1, 3, 4],
				type: 'line',
				smooth: true, // 平滑
				// 取最大、小值
				markPoint: {
					data: [
						{ type: 'max', name: 'Max' },
						{ type: 'min', name: 'Min' }
					]
				},
				// 取平均值
				/*markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }*/
			}
		],
		// 比例大小
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		// 比例大小 设置颜色
		color: ['blue', 'red'],
		// 鼠标聚焦
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross'
			}
		},
		// 保存图片
		toolbox: {
			show: true,
			feature: {
				saveAsImage: {}
			}
		}
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>
</body>
</html>
